---
layout: default
title: Furatto - Utility Classes
---

<h1>Utility Classes</h1>

<p class="main-motto">Simple and functional class names for behavior tweaks.</p>

<hr />

<h3>Floating elements</h3>
<div class="row">
   <div class="col-6">
      <h5 class="code">.pull-left</h5>
      <p>Floats an element to the left.</p>
      <pre>
        <code>
  &lt;div class=&quot;pull-left&quot;&gt;...&lt;/div&gt;
        </code>
      </pre>
   </div>
   <div class="col-6">
     <h5 class="code">.pull-right</h5>
     <p>Floats an element to the right.</p>
     <pre>
      <code>
  &lt;div class=&quot;pull-right&quot;&gt;...&lt;/div&gt;
      </code>
     </pre>
   </div>
</div>

<h5 class="code">.clearfix</h5>
<p>Clears the float on any element.</p>
<pre>
            <code>
  &lt;div class=&quot;clearfix&quot;&gt;...&lt;/div&gt;
            </code>
</pre>

<hr />

<h3>Text variations</h3>
<p>We have included some text variations that will help you give more importance to a certain sentence, or word.</p>

<h5 class="code">.text-uppercase</h5>
<p>Transforms the text to uppercase. Handy when you want to force the uppercase on a text.</p>
<pre>
            <code>
  &lt;p class=&quot;text-uppercase&quot;&gt;...&lt;/p&gt;
            </code>
</pre>

<div class="row">
   <div class="col-4">
     <h5 class="code">.text-muted</h5>
     <p>Slightly decreases the color for a text, which is <span class="code">#666666</span>.</p>
     <pre>
            <code>
  &lt;p class=&quot;text-muted&quot;&gt;...&lt;/p&gt;
            </code>
     </pre>
   </div>
   <div class="col-4">
     <h5 class="code">.text-error</h5>
     <p>This is a helpful class to highlight a chunk of text that you want the user to notice, probably because of an error. The default color is <span class="code">#C0392b</span>.</p>
     <pre>
            <code>
  &lt;p class=&quot;text-error&quot;&gt;...&lt;/p&gt;
            </code>
     </pre>
   </div>
   <div class="col-4">
     <h5 class="code">.text-success</h5>
     <p>This is a helpful class to highlight a chunk of text that you want the user to notice and let them know they are doing something right. The default color is <span class="code">#27AE60</span>.</p>
     <pre>
            <code>
  &lt;p class=&quot;text-success&quot;&gt;...&lt;/p&gt;
            </code>
     </pre>
   </div>
</div>

<hr />

<h3>Text alignment</h3>

<p>Align text is really easy on Furatto, we provide 3 ways to achieve this <span class="code">.text-right</span>, <span class="code">.text-center</span> and <span class="code">.text-justify</span></p>

<div class="row">
   <div class="col-6">
     <p class="text-right"><strong>Text aligned to the right</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     <pre>
       <code>
  &lt;p class=&quot;text-right&quot;&gt;...&lt;/p&gt;
       </code>
     </pre>
   </div>
   <div class="col-6">
     <p class="text-center"><strong>Text align to the center</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     <pre>
       <code>
  &lt;p class=&quot;text-center&quot;&gt;...&lt;/p&gt;
       </code>
     </pre>
   </div>
</div>

<div class="row">
     <p class="text-justify"><strong>Text justified</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     <pre>
       <code>
  &lt;p class=&quot;text-justify&quot;&gt;...&lt;/p&gt;
       </code>
     </pre>
</div>

<hr />

<h3>Content classes</h3>
<p>You can easily manage the content with these <span class="code">3</span> handy class names that will rock you world.</p>

<div class="row">
   <div class="col-4">
     <h5 class="code">.vertical-align</h5>
     <p>This really helpful class will align any element vertically, yes is true. The only <span class="code">caveat</span> is that the parent element has to have a height.</p>
     <pre data-language="html" class="hidden-xs">
        <code>
&lt;div style=&quot;height:300px&quot;&gt;<br/>   &lt;p class=&quot;vertical-align&quot;&gt;...&lt;/p&gt;<br/>&lt;/div&gt;<br/>            
        </code>
     </pre>
   </div>
   <div class="col-4">
     <h5 class="code">.nopadding</h5>
     <p>Removes the padding from any element, we have been using this on some columns, just when it is necessary.</p>
     <pre>
            <code>
  &lt;div class=&quot;nopadding&quot;&gt;...&lt;/div&gt;
            </code>
     </pre>
   </div>
   <div class="col-4">
     <h5 class="code">.hidden</h5>
     <p>Hides any element on the markup by adding the <span class="code">display: none</span> css rule.</p>
     <pre>
            <code>
  &lt;div class=&quot;hidden&quot;&gt;...&lt;/div&gt;
            </code>
     </pre>
   </div>
</div>

